<ngm-splitter [type]="SplitterType.Horizontal" class="flex-1">
    <ngm-splitter-pane size="230px">
        <div class="w-full h-full flex flex-col justify-start items-stretch">
            <ng-container *ngIf="role.type !== RoleTypeEnum.union">
                <mat-toolbar class="pac-sub-toolbar flex justify-between items-center gap-2" displayDensity="compact">
                    <span>{{ 'PAC.MODEL.AccessControl.Cubes' | translate: {Default: "Cubes"} }}</span>

                    <span class="flex flex-1"></span>

                    <button mat-icon-button color="warn" displayDensity="cosy" class="pac-cdk-drop__recycle-bin"
                        cdkDropList
                        [cdkDropListEnterPredicate]="cubeRemovePredicate"
                        (cdkDropListDropped)="removeCube($event)"
                    >
                        <mat-icon color="warn" fontSet="material-icons-round">delete</mat-icon>
                    </button>
                </mat-toolbar>

                <div class="pac-cdk-drop__list flex-1 flex flex-col overflow-auto"
                    cdkDropList
                    [cdkDropListEnterPredicate]="dropCubeEnterPredicate"
                    (cdkDropListDropped)="dropCube($event)"
                >
                    <div class="pac-model-access__cubes flex-1 flex flex-col">
                        <ngm-entity-schema *ngFor="let cube of cubes$ | async; trackBy: trackByName"
                            [class.selected]="cube.cube === selectedCube"
                            [dataSettings]="{dataSource: dataSourceName, entitySet: cube.cube}"
                            [selectedHierarchy]="cube.cube === selectedCube && selectedHierarchy"
                            [capacities]="[
                                EntityCapacity.Dimension,
                                EntityCapacity.Measure,
                            ]"
                            (click)="selectCube(cube)"
                        ></ngm-entity-schema>
                    </div>
                </div>
            </ng-container>

            <ng-container *ngIf="role.type === RoleTypeEnum.union">
                <mat-toolbar class="pac-sub-toolbar flex justify-between items-center gap-2" displayDensity="compact">
                    <span>{{ 'PAC.MODEL.AccessControl.Roles' | translate: {Default: "Roles"} }}</span>
    
                    <pac-inline-search class="flex-1" displayDensity="compact" [formControl]="searchRoleControl"></pac-inline-search>
                <!--     
                    <button mat-icon-button color="warn" displayDensity="cosy" class="pac-cdk-drop__recycle-bin"
                        cdkDropList
                        [cdkDropListEnterPredicate]="cubeRemovePredicate"
                        (cdkDropListDropped)="removeCube($event)"
                    >
                        <mat-icon color="warn" fontSet="material-icons-round">delete</mat-icon>
                    </button> -->
                </mat-toolbar>
    
                <mat-list cdkDropList displayDensity="compact" class="flex-1 overflow-auto">
                    <mat-list-item *ngFor="let role of roles$ | async; let last = last"
                        class="rounded-lg cursor-pointer"
                        cdkDrag [cdkDragData]="role"
                    ><span class="whitespace-nowrap text-ellipsis overflow-hidden">{{ role.name }}</span></mat-list-item>
                </mat-list>
            </ng-container>
        </div>
    </ngm-splitter-pane>
    <ngm-splitter-pane class="ngm-layout-container-secondary">
        <router-outlet #o="outlet"></router-outlet>
    </ngm-splitter-pane>
</ngm-splitter>